<template>
    <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="类型名称" />
        <el-table-column prop="attributeCount" label="属性数量" />
        <el-table-column prop="paramCount" label="参数数量" />
        <el-table-column label="设置" width="250">
            <template #default="{ row }">
                <el-button text bg @click="ShuXinFn(row)">属性列表</el-button>
                <el-button text bg @click="CanShuFn(row)">参数列表</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操做" width="200">
            <template #default="{ row }">
                <el-button text @click="changeShow(row)">
                    编辑
                </el-button>
                <el-button type="danger" @click="delFn(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="编辑类型" :modal=false width="30%">
        <el-form>
            <el-form-item label="类型名称">
                <el-input v-model="target.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]" :total="total" />
</template>
<script setup lang='ts'>
import { ShuXinGuanLiApi, propertyListApi, productAttrDelete, productAttributeCategoryUpdate } from '@/http/ums/api'
import useTable from '@/hooks/useTable'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { reactive, ref } from 'vue'
import router from '@/router'
// @ts-ignore
import { ElMessageBox, ElMessage } from "element-plus";

//弹出类型
const dialogFormVisible = ref(false)

const queryParams = reactive({
    cid: 0,
    pageSize: 5,
    type: 0
})



const { list, pageNum, pageSize, total, fetch } = useTable(ShuXinGuanLiApi, queryParams)


const ShuXinFn = (row: any) => {
    console.log(row);
    queryParams.cid = row.id
    propertyListApi(queryParams).then(res => {
        if (res.code === 200) {
            console.log(res);
            router.push({
                path: '/pms/productAttrList',
                query: {
                    cid: row.id,
                    cname: row.name,
                    type: row.paramCount
                }
            })
        }
    })
}
const CanShuFn = (row: any) => {
    console.log(row);
    queryParams.cid = row.id
    propertyListApi(queryParams).then(res => {
        if (res.code === 200) {
            console.log(res);
            router.push({
                path: 'productAttrList',
                query: {
                    cid: row.id,
                    cname: row.name,
                    type: row.paramCount
                }
            })
        }
    })
}


// const Inpval = ref('')
const target = ref<any>({
    name: ''
})


// 编辑按钮
const changeShow = (row: any) => {
    dialogFormVisible.value = true;
    console.log(row);
    target.value = row;
    // Inpval.value = row.name
}

// 确定
const submit = () => {
    // console.log(params.value);
    console.log(target.value)

    productAttributeCategoryUpdate(
        {
            id: target.value.id,
            name: target.value.name
        }
    ).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '修改成功',
            });
            console.log(res);
            dialogFormVisible.value = false;
        } else {
            ElMessage({
                type: 'info',
                message: '修改失败',
            });
        }
    })
}

// 删除
const delFn = (id: any) => {
    console.log(id);
    ElMessageBox.confirm('是否要删除改品牌?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        productAttrDelete(id).then((res) => {
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                fetch();
            }
        });
    });
}

</script>
<style lang="less" scoped></style>